<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                >

    <f:subview id="cadastroQuestaoEmbutido" rendered="#{fluxoExibicaoCadastro.exibirCadastroQuestao}">
        <h:panelGrid columns="1" styleClass="center">
            <h:panelGroup id="grupCadQuestao" styleClass="esquerda">
                <h:form id="formCadQuestao" styleClass="formularioFundo">
                    <h:panelGrid columns="3" styleClass="bvb-font">
                        <f:facet name="header">
                            <h:outputText value="#{msg.cadQuestaoPanelGridTitle}" styleClass="formularioTitle"/>
                        </f:facet>

                        <h:outputLabel value="#{msg.certificacao}:" id="labelCertificacao" title="#{msg.titleCertificacaoQuestao}"/>
                        <h:selectOneMenu value="#{cadastroQuestao.certificacao}" id="selectCertificacao"
                                         required="true" label="#{msg.certificacao}"
                                         requiredMessage="#{msg.campoObrigatorio}"
                                         disabled="#{cadastroQuestao.questDefinida == true}"
                                         >
                            <f:selectItem itemLabel="#{msg.selecione}" itemValue=""/>
                            <f:selectItems value="#{cadastroQuestao.certificacoes}"/>
                            <f:converter converterId="genericoConverter"/>
                            <f:ajax render="formCadQuestao" event="change" immediate="true"/>
                        </h:selectOneMenu>
                        <p:message for="selectCertificacao"/>

                        <h:outputLabel value="#{msg.versao}:" id="labelVersao" title="#{msg.titleVersaoQuestao}"
                                       rendered="#{cadastroQuestao.certificacao != null}"/>
                        <h:selectOneMenu value="#{cadastroQuestao.versao}" id="selectVersao"
                                         required="true"
                                         requiredMessage="#{msg.campoObrigatorio}"
                                         rendered="#{cadastroQuestao.certificacao != null}"
                                         disabled="#{cadastroQuestao.questDefinida == true}"
                                         label="#{msg.versao}">
                            <f:selectItem itemLabel="#{msg.selecione}" itemValue=""/>
                            <f:selectItems value="#{cadastroQuestao.versoes}"/>
                            <f:converter converterId="genericoConverter"/>
                        </h:selectOneMenu>
                        <p:message for="selectVersao"/>

                        <h:outputLabel value="#{msg.idioma}:" id="labelIdioma" title="#{msg.titleIdiomaQuestao}"
                                       rendered="#{cadastroQuestao.certificacao != null}"/>
                        <h:selectOneMenu value="#{cadastroQuestao.questaoCadastrada.linguagem}" id="selectLinguagem"
                                         required="true" requiredMessage="#{msg.campoObrigatorio}"
                                         rendered="#{cadastroQuestao.certificacao != null}"
                                         disabled="#{cadastroQuestao.questDefinida == true}"
                                         label="#{msg.idioma}">
                            <f:converter converterId="linguagemConverter"/>
                            <f:selectItem itemLabel="#{msg.selecione}" itemValue=""/>
                            <f:selectItems value="#{cadastroQuestao.linguagens}"/>
                        </h:selectOneMenu>
                        <p:message for="selectLinguagem"/>

                        <h:outputLabel value="#{msg.tipoQuestao}:" id="labelTipoQuestao" title="#{msg.titleTipoQuestaoQuestao}"
                                       rendered="#{cadastroQuestao.certificacao != null}"/>
                        <p:selectOneRadio value="#{cadastroQuestao.questaoCadastrada.tipoQuestao}" id="selectTipoQuestao"
                                          required="true" styleClass="bvb-font"
                                          requiredMessage="#{msg.campoObrigatorio}"
                                          rendered="#{cadastroQuestao.certificacao != null}"
                                          disabled="#{cadastroQuestao.questDefinida == true}"
                                          label="#{msg.tipoQuestao}">
                            <f:selectItems value="#{cadastroQuestao.tipoQuestoes}"/>
                            <f:converter converterId="tipoQuestaoConverter"/>
                        </p:selectOneRadio>
                        <p:message for="selectTipoQuestao"/>

                        <h:outputLabel value="#{msg.registroNecessario}:" id="labelRegistroNecessario" title="#{msg.titleResgistradosQuestao}"
                                       rendered="#{cadastroQuestao.certificacao != null}"/>
                        <p:selectBooleanCheckbox value="#{cadastroQuestao.questaoCadastrada.registradosQuestao}" id="selectRegistroNecessario"
                                                 rendered="#{cadastroQuestao.certificacao != null}"
                                                 disabled="#{cadastroQuestao.questDefinida == true}"
                                                 label="#{msg.registroNecessario}">
                        </p:selectBooleanCheckbox>
                        <p:message for="selectRegistroNecessario"/>

                        <h:outputLabel value="#{msg.objetivoCertificacao}:" id="labelObjetivoCertificacao"
                                       title="#{msg.titleObjetivoCertificacao}"
                                       rendered="#{cadastroQuestao.certificacao != null}"/>
                        <p:autoComplete  value="#{cadastroQuestao.questaoCadastrada.objetivoCertificacao}"
                                         id="inputObjetivoCertificacao" required="true"
                                         minQueryLength="3" forceSelection="true"
                                         completeMethod="#{cadastroQuestao.shooser}" 
                                         size="70" requiredMessage="#{msg.campoObrigatorio}"
                                         title="#{msg.titleObjetivoCertificacao}"
                                         rendered="#{cadastroQuestao.certificacao != null}"
                                         disabled="#{cadastroQuestao.questDefinida == true}"
                                         label="#{msg.objetivoCertificacao}"
                                         onkeyup="Contar(this.value, 'promsg', 150)">
                            <f:validateLength minimum="5" maximum="150"/>
                        </p:autoComplete>
                        <h:panelGroup>
                            <span id="promsg"></span><br></br>
                            <p:message for="inputObjetivoCertificacao"/>
                        </h:panelGroup>

                        <h:outputLabel value="#{msg.observacao}:" id="labelObservacao"
                                       title="#{msg.titleObservacaoQuestao}"
                                       rendered="#{cadastroQuestao.certificacao != null}"/>
                        <h:inputTextarea value="#{cadastroQuestao.questaoCadastrada.observacao}"
                                         cols="80" rows="3" id="inputObservacao" required="true"
                                         requiredMessage="#{msg.campoObrigatorio}"
                                         title="#{msg.titleObservacaoQuestao}"
                                         rendered="#{cadastroQuestao.certificacao != null}"
                                         disabled="#{cadastroQuestao.questDefinida == true}"
                                         label="#{msg.observacao}" onkeyup="Contar(this.value, 'obsmsg', 255)">
                            <f:validateLength minimum="5" maximum="255"/>
                        </h:inputTextarea>
                        <h:panelGroup>
                        <span id="obsmsg"></span><br></br>
                        <p:message for="inputObservacao"/>
                        </h:panelGroup>
                        
                        <h:outputLabel value="#{msg.enunciado}:" id="labelEnunciado"
                                       title="#{msg.titleEnunciadoQuestao}"
                                       rendered="#{cadastroQuestao.certificacao != null}"/>
                        <h:inputTextarea value="#{cadastroQuestao.questaoCadastrada.enunciado}"
                                         cols="80" rows="3" id="inputEnunciado" required="true"
                                         requiredMessage="#{msg.campoObrigatorio}"
                                         title="#{msg.titleEnunciadoQuestao}"
                                         rendered="#{cadastroQuestao.certificacao != null}"
                                         disabled="#{cadastroQuestao.questDefinida == true}"
                                         label="#{msg.enunciado}" onkeyup="Contar(this.value, 'enumsg', 2000)">
                            <f:validateLength minimum="5" maximum="2000"/>
                        </h:inputTextarea>
                        <h:panelGroup>
                        <span id="enumsg"></span><br></br>
                        <p:message for="inputEnunciado"/>
                        </h:panelGroup>
                        
                        <h:outputLabel value="#{msg.respostas}:" id="labelRespostasQtdade"
                                       title="#{msg.titleRespostasQuestao}"
                                       rendered="#{cadastroQuestao.certificacao != null}"/>
                        <p:selectOneRadio value="#{cadastroQuestao.respostasQtdade}"
                                          id="selectRespostasQtdade" required="true" styleClass="bvb-font"
                                          requiredMessage="#{msg.campoObrigatorio}"
                                          rendered="#{cadastroQuestao.certificacao != null}"
                                          disabled="#{cadastroQuestao.questDefinida == true}"
                                          label="#{msg.respostas}" immediate="true">
                            <f:selectItems value="#{cadastroQuestao.quantidadeRespostas}"/>
                        </p:selectOneRadio>
                        <p:message for="selectRespostasQtdade"/>

                        <h:outputText value=""/>
                        <h:panelGroup>
                            <p:commandLink actionListener="#{cadastroQuestao.atualizaRespostas}" update="formCadQuestao,messages"
                                           id="buttonQuestaoAtualizar" styleClass="ui-button_link" title="#{msg.titleCadastrarRespostas}"
                                           rendered="#{cadastroQuestao.certificacao != null and cadastroQuestao.questDefinida == false}">
                                <h:graphicImage library="img" name="bt_respostas.png"/>
                            </p:commandLink>
                            <p:spacer width="2" height="2"/>
                            <h:commandButton  title="#{msg.titleLimparCadQuestao}" immediate="true" image="/resources/img/bt_limpar_red.png"
                                              id="buttonLimpar2"  actionListener="#{cadastroQuestao.init}"
                                              rendered="#{cadastroQuestao.certificacao != null and cadastroQuestao.questDefinida == false}">
                                <f:ajax render="formCadQuestao"></f:ajax>
                            </h:commandButton>
                        </h:panelGroup>
                    </h:panelGrid>

                    <h:panelGroup id="groupRespostas" rendered="#{cadastroQuestao.certificacao != null and cadastroQuestao.questDefinida == true}" >
                        <p:dataTable value="#{cadastroQuestao.respostas}" var="resposta" rendered="#{cadastroQuestao.respostasQtdade != null}"
                                     styleClass="bvb-font">
                            <p:column styleClass="center" style="width: 75px;">
                                <f:facet name="header">
                                    <h:outputText value="#{msg.posicao}" title="#{msg.titleOrdemResposta}" id="labelOrdem"/>
                                </f:facet>
                                <h:outputText value="#{resposta.ordem}ª" title="#{msg.titleOrdemResposta}" styleClass="blue"/>
                            </p:column>

                            <p:column styleClass="center" style="width: 75px;">
                                <f:facet name="header">
                                    <h:outputText value="#{msg.correta}" id="labelCorreta" title="#{msg.titleCorretaResposta}"/>
                                </f:facet>
                                <h:selectBooleanCheckbox value="#{resposta.correta}" id="ordem" title="#{msg.titleCorretaResposta}"
                                                         label="#{msg.correta}"/>
                            </p:column>

                            <p:column>
                                <f:facet name="header">
                                    <h:panelGroup>
                                    <span id="resmsg"></span>
                                    <h:outputText value="  #{msg.resposta}" id="labelResposta" title="#{msg.titleRespostaQuestao}"/>
                                    </h:panelGroup>
                                </f:facet>
                                <h:inputTextarea value="#{resposta.resposta}" label="#{msg.resposta}" style="font-size: 10px;"
                                                 cols="45" rows="3" id="inputResposta"   required="true"
                                                 title="#{msg.titleRespostaQuestao}" onkeyup="Contar(this.value, 'resmsg', 250)">
                                    <f:validateLength minimum="1" maximum="250"/>
                                </h:inputTextarea>
                                <p:message for="inputResposta"/>
                            </p:column>

                            <p:column>
                                <f:facet name="header">
                                    <h:panelGroup>
                                        <span id="comentmsg"></span>
                                    <h:outputText value="  #{msg.comentario}" id="labelComentario" title="#{msg.titleComentarioResposta}"/>
                                    </h:panelGroup>
                                </f:facet>
                                <h:panelGroup>
                                    <h:inputTextarea value="#{resposta.comentario}" label="#{msg.comentario}"
                                                     cols="45" rows="3" id="inputComentario" required="true"
                                                     title="#{msg.titleComentarioResposta}" style="font-size: 10px;"
                                                     onkeyup="Contar(this.value, 'comentmsg', 150)">
                                        <f:validateLength minimum="5" maximum="150"/>
                                    </h:inputTextarea>
                                    
                                        <p:message for="inputComentario"/>
                                    
                                </h:panelGroup>
                            </p:column>
                        </p:dataTable>
                        <h:panelGrid columns="3" cellspacing="2">
                            <p:commandLink actionListener="#{cadastroQuestao.salvarQuestao}" update="conteudoCentralGroup,messages"
                                           title="#{msg.titleButtonSalvarQuestao}" id="buttonSalvar" styleClass="ui-button_link">
                                <h:graphicImage library="img" name="bt_salvar.png"/>
                            </p:commandLink>
                            <h:commandButton  title="#{msg.titleButtonPerguntaNDefinida}" immediate="true" image="/resources/img/bt_questao_red.png"
                                              id="buttonLimpar3"  actionListener="#{cadastroQuestao.alternarQuestaoResposta}">
                                <f:ajax render="formCadQuestao"></f:ajax>
                            </h:commandButton>
                            <h:commandButton  title="#{msg.titleLimparCadQuestao}" immediate="true" image="/resources/img/bt_limpar_red.png"
                                              id="buttonLimpar"  actionListener="#{cadastroQuestao.init}">
                                <f:ajax render="formCadQuestao"></f:ajax>
                            </h:commandButton>
                        </h:panelGrid>
                    </h:panelGroup>
                </h:form>
            </h:panelGroup>

            <p:spacer width="100%" height="15px;"/>
        </h:panelGrid>

    </f:subview>
</ui:composition>
